<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-tabs
        v-model="pageData.query.systemType"
        @tab-change="handleTabClick"
        v-if="stores.dict && userStore.systemType == 'admin' && stores.dict?.systemType?.length > 1"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in stores.dict.systemType"
          :key="index"
        ></el-tab-pane>
      </el-tabs>

      <el-table v-loading="pageData.loading" :data="pageData.data">
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <!-- <el-table-column prop="systemTypeDesc" label="系统"></el-table-column> -->
        <el-table-column label="角色状态">
          <template #default="{ row }">
            <el-switch
              :disabled="row.isAdmin"
              :before-change="
                () =>
                  pageActions.handleUpdate(
                    row,
                    { isOpen: !row.isOpen },
                    !row.isOpen ? '确认上线？' : '确认下线？',
                    '已修改'
                  )
              "
              v-model="row.isOpen"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="right" width="300px">
          <template #default="{ row }">
            <!-- <el-button
              link
              type="primary"
              icon="plus"
              @click="pageActions.handleAdd({ parentId: row.id, systemType: row.systemType })"
            >
              新增
            </el-button> -->
            <el-button
              link
              type="primary"
              icon="edit"
              @click="pageActions.handleEdit(row)"
              :disabled="row.isAdmin || row.isSystem"
            >
              编辑
            </el-button>
            <el-button
              link
              type="primary"
              icon="delete"
              @click="pageActions.handleDelete(row)"
              :disabled="row.isAdmin || row.isSystem"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <!-- <template #footer>
      <div class="app-toolbar"></div>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageData.page"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      />
    </template> -->

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
    >
      <template #menu>
        <el-tree
          ref="menuTreeRef"
          :props="{ label: 'menuName', children: 'children' }"
          :data="menuTree"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="pageData.detail.menuIds"
        />
      </template>
    </jax-dialog-edit>
  </app-page>
</template>

<script setup>
import { usePageList, useAppStore, useUserStore, http } from 'jax-node'

const { query } = useRoute()
const stores = useAppStore()
const userStore = useUserStore()

const { pageData, pageActions } = usePageList({
  api: '/system/role',
  query: {
    systemType: query.systemType || userStore.systemType,
  },
})

pageActions.getData = () => {
  http(`/system/role/tree`, {
    params: {
      systemType: pageData.query.systemType,
    },
  }).then(res => {
    pageData.data = res
  })
}

const menuTree = ref([])
const menuTreeRef = ref()

const json = computed(() => {
  const required = true
  const miniInput = { style: 'width:100px' }

  // 动态表单
  const dynamicFormItem = []

  let menuTree = []
  // if (!this.appDetail.isAdmin) menuTree.push({ name: 'menu', label: '权限信息' })
  menuTree.push({ name: 'menu', label: '权限信息' })

  return [
    { name: 'roleName', label: '角色名称', required },
    { name: 'roleDesc', label: '角色描述' },
    ...dynamicFormItem,
    // { name: 'isAdmin', label: '全部权限', type: 'switch' },
    ...menuTree,
  ]
})

// 保存前
pageActions.handleBeforeSubmit = detail => {
  detail.menuIds = menuTreeRef.value.getCheckedNodes().map(menuItem => menuItem.id)
  detail.systemType = pageData.query.systemType
}

const handleTabClick = (tab, event) => {
  pageActions.handleSearch()
  getMenuTree()
}

function getMenuTree(detail) {
  http(`/system/menu/tree`, {
    params: { systemType: pageData.query.systemType },
  }).then(res => {
    menuTree.value = res
  })
}

getMenuTree()
</script>

<style lang="scss" scoped></style>
